<template>
    <div class="content">
        <div class="box" ref="box">
            <div class="scroll_left">
                <!--左侧div内容-->
                <div class="f_left">
                    <el-input placeholder="请输入文件夹名称" v-model.trim="filterText">
                    </el-input>
                    <div class="scorll">
                        <el-tree :highlight-current="true" :render-content="renderContent" :data="treeData" node-key="id"  :default-expanded-keys="[currentKey]" :expand-on-click-node="false" :filter-node-method="filterNode" @node-click="handleNodeClick" ref="tree">
                        </el-tree>
                    </div>
                </div>
            </div>
            <div class="resize" title="收缩侧边栏">⋮</div>
            <div class="mid">
                <!--右侧div内容-->
                <div class="f_right">
                    <div class="btnsWrap">
                        <Input size="large" style="width: auto; float: left" search enter-button placeholder="请输入文件名称" v-model.trim="keyword" @on-search="searchAll" />
                        <input type="password" autocomplete="new-password" style="display: none" />
                        <el-button @click="addDoc" type="primary" style="margin-left: 10px; float: left" icon="el-icon-plus">文件夹</el-button>
                        <el-button @click="deleteDoc" type="danger" style="margin-left: 10px; float: left" icon="el-icon-delete">删除</el-button>
                        <el-button @click="moves(2)" style="float: left" type="warning" icon="el-icon-s-finance">移动</el-button>
                        <el-upload class="upload-demo" :action="uploadUrl" :data="docData" :before-upload="beforeFile" :on-success="docSuccess" :on-error="docError" :on-progress="doProgress" :show-file-list="false">
                            <el-button style="background-color: #049280; border-color: #049280" :disabled="percentage != 0" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
                        </el-upload>
                    </div>
                    <el-progress v-if="percentage != 0" :show-text="true" :text-inside="true" :stroke-width="15" :percentage="percentage" status="success" :format="format"></el-progress>
                    <div style="margin-top: 10px; height: calc(100% - 55px); width: 100%; border-radius: 16px; overflow: hidden; background: #fff; ">
                        <div style=" width: 96%;margin:0 auto;margin-top:20px;">
                            <el-table :data="tableData" style="width: 100%" :height="tableHeight" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" min-width="5%" ></el-table-column>
                                <el-table-column :show-overflow-tooltip="true" width="300" label="名称">
                                    <template slot-scope="scope">
                                        <div class="doc">
                                            <img :src="docImg" alt="" v-if="scope.row.docType == 0">
                                            <img src="./../../assets/images/doc/list/word.png" alt="" v-else-if=" scope.row.docType == 1 &&(scope.row.hz =='doc' || scope.row.hz =='docx' )">
                                            <img src="./../../assets/images/doc/list/excel.png" alt="" v-else-if="scope.row.docType == 1 &&(scope.row.hz =='xls' || scope.row.hz =='xlsx') ">
                                            <img src="./../../assets/images/doc/list/ppt.png" alt="" v-else-if="scope.row.docType == 1 &&(scope.row.hz =='ppt' || scope.row.hz =='pptx') ">
                                            <img src="./../../assets/images/doc/list/pdf.png" alt="" v-else-if="scope.row.docType == 1 &&(scope.row.hz =='pdf' || scope.row.hz =='PDF') ">
                                            <img src="./../../assets/images/doc/list/img.png" alt="" v-else-if="scope.row.docType == 1 &&(scope.row.hz =='bmp' || scope.row.hz =='jpg' || scope.row.hz =='jpeg' || scope.row.hz =='png' || scope.row.hz =='gif')">
                                            <img src="./../../assets/images/doc/list/doc_file_common.png" v-else alt="">
                                            <p @click="look(scope.row)" style=" cursor: pointer; width:280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ">
                                                {{ scope.row.name }}
                                            </p>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createUserName" min-width="10%" label="创建人"></el-table-column>
                                <el-table-column  prop="updateTime" min-width="20%" label="修改时间"></el-table-column>
                                <el-table-column prop="BT"  label="大小" min-width="10%"></el-table-column>
                                <el-table-column label="操作" min-width="15%">
                                    <template slot-scope="scope">
                                        <div class="doc">
                                            <el-button type="text" @click="handleEdit(scope.row)" style="cursor:pointer" class="el-icon-edit">重命名</el-button>
                                            <el-button type="text" style="margin-left:20px;" :disabled="scope.row.docType == 0" @click="downFile(scope.$index, scope.row)" class="el-icon-download">下载</el-button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <el-pagination style="text-align: center;margin:20px 0" v-show="tableData.length > 0" @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-size="10" layout="total,prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <!-- 弹窗 -->
        <Modal v-model="moveModal" title="移动文档" >
            <div>
                <el-tree :data="treeData" node-key="id" label="name" :expand-on-click-node="false" @node-click="moveNodeClick" :highlight-current="true">
                    <span class="custom-tree-node" slot-scope="{ node }">
                        <span>{{ node.label }}</span>
                    </span>
                </el-tree>
            </div>
            <div slot="footer">
                <el-button @click="close(3)" type="info" size="small" plain>取消</el-button>
                <el-button @click="moveDoc" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="renameModal" title="重命名" >
            <div>
                {{fileType===0?'文件夹名称':'文件名'}}：<el-input style="width: 80%" v-model.trim="renameText" placeholder="请输入内容" maxlength="20">
                    <template slot="append" v-if="fileType == 1">.{{appendHz}}</template>
                </el-input>
                <span style="color:red">*</span>
            </div>
            <div slot="footer">
                <el-button @click="close(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="rename" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="removeModal" title="删除" width="360px">
            <div>确定删除文件？</div>
            <div slot="footer">
                <el-button @click="close(4)" type="info" size="small" plain>取消</el-button>
                <el-button @click="fileDel" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal width="835px" v-model="viewModal" title="预览" :footer-hide="true">
            <el-image style="width: 800px" :src="lookUrl"></el-image>
        </Modal>

        <Modal v-model="docModal" title="新建文件夹"   :mask-closable="false">
            <div>
                <span style="color:red">*</span>
                文件夹名称：<el-input style="width: 80%" v-model.trim="docName" placeholder="请输入内容" maxlength="20"></el-input>
            </div>
            <div slot="footer">
                <el-button @click="close(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitDoc" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    folderList,
    fileList,
    addDocument,
    ossConfig,
    delDocument,
    downloadUrl,
    editDocName,
    moveDocument,
    searchFile
} from "@/api/doc.js";
export default {
    data() {
        return {
            filterText: "", // 左侧文件夹搜索关键词
            keyword: "", // 右侧搜索关键词
            deptId: "",

            fileId: "", //文件id
            treeData: [],
            moveDirId: "",
            currentKey: "", //默认选中目录

            moveModal: false,

            tableData: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,

            /* 新建文件夹弹窗 */
            docModal:false,
            docName:"",

            /* 删除文件、文件夹 */
            removeModal: false,
            moveArry: [],

            /* 文件上传 */
            uploadUrl: "", 
            docData: {},
            fileUrl: "",
            fileSize: "",
            fileName: "",
            percentage: 0, //进度条

            /* 重命名 */
            renameModal: false,
            renameText: "", //编辑文件名字
            handleId:"",
            fileType:"", // 0-文件夹，1-文件
            appendHz: "", // 文件后缀

            /* 图片文件预览 */
            lookUrl: "",
            viewModal: false,
            
            tableHeight:window.innerHeight - 265 ,
            
            docImg :require("./../../assets/images/doc/list/doc_file.png"),
            docRulesImg :require("./../../assets/images/doc/list/doc_rules.png"),
        }
    },
    mounted() {
        this.dragControllerDiv()
        this.deptId = this.$store.state.porjectObject.deptId
        this.getFolderList()
    },
    methods: {
        renderContent(h, { root, node, data }){
            return (
                <span class="custom-tree-node">
                    <p>
                        <img src ={this.docImg}/>
                        <span class="title" >{data.label}</span>
                    </p>
                </span>
            )
        },

        /* 点击左侧树形结构选中节点 */
        handleNodeClick(e) {
            this.fileId = e.id
            this.pageNum = 1
            this.keyword =""
            this.getFileList()
        },

        /* 获取文件夹 */
        getFolderList(){
            let param = {
                deptId: this.deptId
            }
            folderList(param).then(res=>{
                if (res.code == 200) {
                    if(res.data&&res.data.length>0){
                        let treeData = JSON.parse(JSON.stringify(res.data).replace(/childFolder/g,"children").replace(/name/g,"label"))
                        this.treeData = this.removeEmptyChildren(treeData)
                        this.fileId = this.fileId ||  res.data[0].id;
                        this.currentKey = this.fileId || res.data[0].id;
                        this.$nextTick(() => {
                            this.$refs.tree.setCurrentKey( this.fileId);
                        })
                        this.getFileList()
                    } 
                } else {
                    this.$Message.warning(res.msg);
                }
            })
        },

        /* tree数据处理 */
        removeEmptyChildren (data) {
            data.forEach(item => {
                if ('children' in item && item.children.length === 0) {
                    delete item.children
                } else if ('children' in item && item.children.length) {
                    this.removeEmptyChildren(item.children)
                }
            })
            return data
        },

        /* 搜索文件夹 */
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },

        /* 获取文件列表 */
        getFileList(){
            let param = {
                deptId: this.deptId,
                folderId: this.fileId,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            fileList(param).then(res=>{
                if (res.code == 200) {
                    res.data.list.forEach(element => {
                        if(element.fileSize) {
                            element.BT = this.bytesToSize(element.fileSize)
                        } else {
                            element.BT = "-"
                        }
                        if(element.name) {
                           element.hz = this.extname(element.name)
                        } else {
                            element.hz = ""
                        }
                    })
                    this.tableData = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(res.msg)
                }
            })
        },

        /* 翻页 */
        handleCurrentChange(val) {
            this.pageNum = val
            this.getFileList()
        },

        /* 新建文件夹弹窗 */
        addDoc(){
            this.docName = "";
            this.docModal = true;
        },

        /* 新建文件夹提交 */
        submitDoc(){
            if(this.docName == "") {
                this.$Modal.warning({
                    title: "提示",
                    content: "文件夹名称不能为空"
                })
                return
            }
            let params = {
                deptId: this.deptId,
                parentId: this.fileId,
                docType: 0,
                name: this.docName,
            }
            addDocument(params).then(res=>{
                if(res.code == 200) {
                   this.$Message.success("操作成功")
                   this.docModal = false
                   this.getFolderList()
                } else {
                   this.$Message.warning(res.msg)
                }
            }).catch(error=>{
                console.log(error)
            })
        },

        /* 上传进度 */
        doProgress(event, file, fileList) {
            if (this.uploadUrl != "") {
                this.percentage = parseInt(event.percent.toFixed(0));
                if (event.percent == 100) {
                    this.percentage = 0;
                }
            }
        },

        /* 上传成功 */
        docSuccess(res, file) {
            if (this.uploadUrl != "") {
                if (file.status == "success") {
                    let params = {
                        deptId: this.deptId,
                        parentId: this.fileId,
                        docType: 1,
                        name: this.fileName,
                        fileUrl: this.fileUrl,
                        fileSize: this.fileSize
                    }
                    addDocument(params).then(res=>{
                        if(res.code == 200) {
                            this.$Message.success("上传成功")
                            this.pageNum = 1
                            this.getFileList()
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    }).catch(error=>{
                        console.log(error)
                    })
                }
            }
        },

        /* 上传失败 */
        docError(error) {
            if (this.uploadUrl != "") {
                this.$Message.warning("上传失败！")
            }
        },

        /* 获取oss直传参数 */
        beforeFile(file) {
            if(file.size/1024/1024>200){
                this.$Message.warning("文件大小不能超过200M")
                return
            }
            this.docData = {}
            this.uploadUrl = ""
            this.fileSize = file.size
            this.fileName = file.name

            let params = {
                name: file.name
            }
            return new Promise(async (resolve, reject) => {
                await ossConfig(params).then(res=> {
                    if (res.code == 200) {
                        this.uploadUrl = res.data.host
                        this.fileUrl = res.data.host + '/' + res.data.dir + '/' + res.data.fileName
                        this.docData = {
                            key: res.data.dir + '/' + res.data.fileName,
                            policy: res.data.policy,
                            OSSAccessKeyId: res.data.accessId,
                            success_action_status: "200", //让服务端返回200,不然，默认会返回204
                            signature: res.data.signature,
                            dir: res.data.dir,
                            host: res.data.host,
                            "Content-Disposition": "attachment;filename=" + encodeURIComponent(file.name),
                            'x-oss-object-acl':'private'
                        }
                        resolve()
                    } else {
                        this.$Message.warning(res.msg)
                        return reject()
                    }
                })
            })
        },

        /* 勾选中文件 */
        handleSelectionChange(val) {
            this.moveArry = []
            for (var i = 0; i < val.length; i++) {
                this.moveArry.push(val[i].id)
            }
        },

        /* 移动文档 */
        moves() {
            if (this.moveArry.length < 1) {
                this.$Message.warning("请勾选要移动的文件！")
            } else {
                this.moveModal = true
            }
        },

        /* 选择目标文件夹 */
        moveNodeClick(e) {
            this.moveDirId = e.id
        },

        /* 确认移动该文档 */
        moveDoc() {
            if(!this.moveDirId){
                this.$Message.warning("请选择目标文件夹")
                return
            }
            if(this.moveArry.includes(this.moveDirId)){
                this.$Message.warning("移动的文件不能包含目标文件夹")
                return
            }
            let params = []
            this.moveArry.forEach(element => {
                params.push({
                    id: element,
                    parentId: this.moveDirId
                })
            })
            moveDocument(params).then((res) => {
                if (res.code == 200) {
                    this.moveArry = []
                    this.moveModal = false
                    this.getFileList()
                    this.getFolderList()
                    this.$Message.success("移动成功")
                } else {
                    this.$Message.warning(res.msg)
                }
            }).catch((error) => {
                console.log(error)
            })
        },

        /* 删除文件、文件夹弹窗 */
        deleteDoc(){
            if (this.moveArry.length < 1) {
                this.$Message.warning("请勾选要删除的文件！");
            } else {
                this.removeModal = true
            }
        },

        /* 删除文件 */
        fileDel() {
            let params = this.moveArry
            delDocument(params).then((res) => {
                if (res.code == 200) {
                    this.pageNum = 1
                    this.moveArry = []
                    this.getFileList()
                    this.getFolderList()
                    this.removeModal = false
                    this.$Message.success("删除成功")
                } else {
                    this.$Message.warning(res.msg)
                }
            }).catch((error) => {
                console.log(error)
            })
        },

        /* 文件名点击事件 */
        look(row) {
            if(row.docType == 0) {
                this.fileId = row.id
                this.pageNum = 1
                this.getFileList()
                this.$nextTick(() => {
                    this.$refs.tree.setCurrentKey(
                        this.fileId
                    )
                })
            } else if(row.docType == 1) {
                this.getFileUrl(row.id, false)
            }
        },

        /* 获取文件地址 */
        getFileUrl(id, bole){
            let params = {
                fileId:id
            }
            downloadUrl(params).then(res=>{
                if(res.code == 200){
                    let url = res.data.fileUrl
                    let name = res.data.suffix
                    if(bole){
                        let a = document.createElement("a")
                        a.setAttribute('href', url)
                        // a.setAttribute("target","_blank")
                        a.setAttribute('download', url)
                        a.click()
                    } else {
                        this.lookUrl = url
                        if (name == "jpg" || name == "png") {
                            this.viewModal = true
                        } else if (name == "pdf" || name == "PDF" || name == "doc" || name == "DOC" || name == "docx" || name == "DOCX" || name == "PPT" || name == "ppt" || name == "txt") {
                            let a = document.createElement("a")
                            a.setAttribute('href', url)
                            // a.setAttribute("target","_blank")
                            a.setAttribute('download', url)
                            a.click()
                        } else {
                            let a = document.createElement("a")
                            a.href = url
                            // a.setAttribute("target","_blank")
                            a.click()
                        }
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },

        /* 下载 */
        downFile(index, row) {
            this.getFileUrl(row.id, true)
        },

        /* 重命名弹窗 */
        handleEdit(row) {
            this.renameModal = true
            this.fileType = row.docType
            this.handleId = row.id
            if(row.docType == 0){
               this.renameText = row.name
            } else  if(row.docType == 1){
                this.appendHz= row.hz
                let str = row.name
                var n = str.lastIndexOf(".")
                this.renameText = str.substr(0, n)
            }
        },

        /* 重命名提交 */
        rename() {
            if(this.renameText == "") {
                this.$Modal.warning({
                    title: "提示",
                    content: "文件夹名称不能为空"
                })
                return
            }
            let params = {
                id: this.handleId,
                name: this.fileType == 1 ? this.renameText + '.' + this.appendHz : this.renameText
            }
            editDocName(params).then((res) => {
                if (res.code == 200) {
                    this.$Message.success("修改成功！")
                    this.renameModal = false
                    this.getFileList()
                    if(this.fileType == 0) {
                        this.getFolderList()
                    }
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch((error) => {
                console.log(error);
            });
        },

        /* 弹窗关闭 */
        close(type){
            if (type == 1) {
                this.docModal = false;
            } else if(type == 2) {
                this.renameModal = false;
            } else if (type == 3) {
                this.moveModal = false;
            } else if (type == 4) {
                this.removeModal = false;
            }
        },

        /* 搜索文件 */
        searchAll() {
            this.pageNum = 1
            if(this.keyword == "") {
               this.getFileList()
               return
            }
            let params = {
                deptId: this.deptId,
                folderId: this.fileId,
                name: this.keyword,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            }
            searchFile(params).then(res=>{
                if (res.code == 200) {
                    res.data.list.forEach(element => {
                        if(element.fileSize) {
                            element.BT = this.bytesToSize(element.fileSize)
                        } else {
                            element.BT = "-"
                        }
                        if(element.name) {
                           element.hz = this.extname(element.name)
                        } else {
                            element.hz = ""
                        }
                    })
                    this.tableData = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(res.msg)
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        
        /* 文件大小 */
        bytesToSize(bytes) {
            if (bytes === 0) return "0 B"
            var k = 1024
            let sizes = [" B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
            let i = Math.floor(Math.log(bytes) / Math.log(k))
            let num = (bytes / Math.pow(k, i)).toFixed(2)
            return num + " " + sizes[i]
        },

        /* 上传进度 */
        format() {
            return this.fileName + " " + this.percentage + "%"
        },

        /* 左侧拖拽事件 */
        dragControllerDiv() {
            var resize = document.getElementsByClassName("resize");
            var left = document.getElementsByClassName("scroll_left");
            var mid = document.getElementsByClassName("mid");
            var box = document.getElementsByClassName("box");
            for (let i = 0; i < resize.length; i++) {
                // 鼠标按下事件
                resize[i].onmousedown = function (e) {
                    //颜色改变提醒
                    resize[i].style.background = "#ccc";
                    var startX = e.clientX;
                    resize[i].left = resize[i].offsetLeft;
                    // 鼠标拖动事件
                    document.onmousemove = function (e) {
                        var endX = e.clientX;
                        var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
                        var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
                        if (moveLen < 32) moveLen = 300; // 左边区域的最小宽度为32px
                        if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px
                        resize[i].style.left = moveLen; // 设置左侧区域的宽度
                        for (let j = 0; j < left.length; j++) {
                            left[j].style.width = moveLen + "px";
                            mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";
                        }
                    };
                    // 鼠标松开事件
                    document.onmouseup = function (evt) {
                        //颜色恢复
                        resize[i].style.background = "#d6d6d6";
                        document.onmousemove = null;
                        document.onmouseup = null;
                        resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
                    };
                    resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
                    return false;
                }; 
            }
        },
        
        /* 获取文件后缀 */
        extname(filename) {
            if (!filename || typeof filename != "string") {
                return false
            }
            let a = filename.split("").reverse().join("")
            let b = a.substring(0, a.search(/\./)).split("").reverse().join("")
            return b
        },
    },
    computed: {},
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    }
};
</script>

<style scoped lang="less">
.content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.f_left {
    width: 90%;
    height: 100%;
    margin-left: 5%;
    background: #ffffff;
    padding: 20px 5%;
    box-sizing: border-box;
    border-radius: 16px;
    float: left;

    .l_add {
        font-size: 16px;
        color: #fff;
        margin-top: 15px;
    }
    .l_lis {
        position: relative;
        margin-bottom: 10px;
        background: #2ca494;
        color: #fff;
    }
    .l_operation {
        position: absolute;
        right: 10px;
        top: 0px;
    }
}

/deep/.custom-tree-node {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p{
        width: 100%;
        height: 80%;
        display: flex;
        justify-content:flex-start;
        align-items: center;
    }
    img{
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
    .title {
        width: 130px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sub {
        width: 16px;
        height: 16px;
        background: #2d8cf0;
        color: #fff;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
    }
    .btn {
        // margin-right: 10px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 20px;
            height: 20px;
        }
    }
}

.ivu-collapse {
    background-color: #049280;
    border-radius: 3px;
    border: 1px solid #049280;
}
.ivu-collapse > .ivu-collapse-item {
    border-top: 1px solid #049280 !important;
}
/deep/ .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header {
    height: 38px;
    line-height: 38px;
    padding-left: 16px;
    color: #fff;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}
/deep/.ivu-collapse-content {
    color: #fff !important;
    padding: 0 16px;
    background-color: #2ca494 !important;
}
.f_right {
    float: left;
    width: 96%;
    height: 100%;
    margin-left: 2%;
    .btnsWrap{
        overflow: hidden;
        width: 100%;
        height:40px;
        margin:0 auto;
        margin-bottom: 15px;
        background: #f2f3f7;
    }
    /deep/.el-progress-bar__outer{
        background-color: #d2d2d2;
    }
    /deep/.el-table thead th {
        background: var(--themeColor1) !important;
    }
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
// ::-webkit-scrollbar {
//     width: 0 !important;
// }
// ::-webkit-scrollbar {
//     width: 0 !important;
//     height: 0;
// }
/deep/.el-tree-node__content {
    background-color: #2ca494 !important;
    margin-bottom: 1px;
}

/deep/.el-tree {
    // background: #049280 !important;
    color: #ffffff;
}
/deep/.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #91b6e7 !important;
}
/deep/.el-tree-node__content:hover {
    background-color: #0eb8ec !important;
}
.upload-demo {
    float: left;
    margin-left: 10px;
}
/deep/.ivu-input-group-large .ivu-input,
.ivu-input-group-large > .ivu-input-group-append,
.ivu-input-group-large > .ivu-input-group-prepend {
    font-size: 14px;
    padding: 6px 7px;
    height: 40px;
}

.box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/*左侧div样式*/
.scroll_left {
    width: calc(25% - 10px); /*左侧初始化宽度*/
    height: 100%;
    float: left;
}
/*拖拽区div样式*/
.resize {
    cursor: col-resize;
    width: 10px;
    height: 100%;
    float: left;
    background-color: #d6d6d6;
    border-radius: 5px;
    font-size: 32px;
    color: #fff;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
    color: #1891ff;
}
/*右侧div'样式*/
.mid {
    float: left;
    width: 75%; /*右侧初始化宽度*/
    height: 100%;
    // background: #f2f3f7;
    // box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #049280;
    color: #fff;
}
/deep/.ivu-input-search {
    cursor: pointer;
    padding: 0 16px !important;
    background: #1891ff !important;
    color: #fff !important;
    border-color: #1891ff !important;
    transition: all 0.2s ease-in-out;
    position: relative;
    z-index: 2;
}
/deep/.el-input__inner {
    text-align: left;
}
/deep/.el-tree-node__content {
    border-radius: 3px;
    height: 30px;
}
.doc{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img{
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
}
.scorll{
    margin-top: 10px;
    // /deep/.el-tree-node__expand-icon{
    //     color: #ffffff;
    // }
}
.scorll::-webkit-scrollbar {
    width: 6px;
    height: 10px;
}
/*滚动槽*/
.scorll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}
/* 滚动条滑块 */
.scorll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.scorll::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 0, 0, 0.4);
}
</style>
